<template>
  <div class="doExam">
    <div class="paper">
      <div class="title">
        <!-- <div class="mb10">当前考试名称:</div> -->
        <div class=" ">
          {{ paper.paperName }}
        </div>
      </div>
      <el-divider></el-divider>
      <div class="score">
        <span class="mr20"> 分数： {{ paper.paperScore }} </span>
        <span> 时长： {{ paper.suggestTime }}分钟 </span>
      </div>
      <el-divider></el-divider>
      <!-- 答题卡 -->
      <div class="questionLabel">
        <div v-for="(v, i) in paperAndQuestion" :key="v.questionId" class="mr5 mb5">
          <!--    <el-tag :type="questionCompleted(item.completed)" class="do-exam-title-tag" @click="goAnchor('#question-'+item.itemOrder)">{{item.itemOrder}}</el-tag> -->
          <el-tag :type="!v.computed ? 'info' : ''"> {{ i + 1 }} </el-tag>
        </div>
      </div>
      <el-divider></el-divider>
      <div class="time-remaining">
        <p class="time-remaining-label">剩余时间</p>
        <p class="time-remaining-content">
          <countDown :timestamp="countDownTime" @end="countDownEnd" />
        </p>
      </div>
      <el-divider></el-divider>
      <div>
        <el-button type="primary" @click="submit">提交试卷</el-button>
      </div>
    </div>
    <!-- 问题列表 -->
    <div class="questiones ml20 pt30 pr30 pb30 pl30">
      <el-form :model="form" ref="form" label-width="100px">
        <el-row v-for="(v, i) in paperAndQuestion" :key="v.questionId">
          <el-card class="mb10" v-if="paperAndQuestion.length !== 0">
            <el-form-item :key="v.questionId" :label="i + 1 + ''">
              <Answer
                :id="v.questionId"
                :items="JSON.parse(v.questionItems)"
                :type="v.questionType"
                :title="v.questionTitle"
              ></Answer>
            </el-form-item>
          </el-card>
        </el-row>
      </el-form>
    </div>
  </div>
</template>
<script>
import { getPaperNoCurrent, submitPaper } from "@/api/exam/paper";
import countDown from "@/components/exam/countDown";
import Answer from "@/components/exam/answer";
import { mapActions, mapGetters } from "vuex";
export default {
  name: "doExam",
  components: { countDown, Answer },
  data() {
    return {
      paper: "",
      paperAndQuestion: [],
      countDownTime: 0, // 倒计时
      endTidoExamEndTime: 1,
      form: {},
    };
  },
  created() {
    let { query } = this.$route;
    console.log(query);
    if (!query.paperId || !query.paperAnswerId || !query.doExamEndTime) {
      this.$modal.msgError("参数有误，请重新选择");
      this.$router.push("/paper/list");
    } else {
      this.countDownTime = (query.doExamEndTime - new Date().getTime()) / 1000;
      this.doExamEndTime = query.doExamEndTime;
      this.getPaperAndQuestion();
      // console.log("created", this.answerList);
    }
  },
  computed: {
    ...mapGetters(["answerList"]),
  },
  methods: {
    ...mapActions(["setAnswers", "setPaperId", "clearAnswers"]),
    /**
     * 获取考题
     */
    async getPaperAndQuestion() {
      try {
        let { data } = await getPaperNoCurrent(this.$route.query.paperId);
        if (!data) {
          this.$modal.msgError("获取题目列失败,或者本试卷无考题");
        }
        this.paper = data.paper;
        this.paperAndQuestion = data.paperAndQuestion;
        this.setPaperId(data.paper);
        /*      this.setAnswers(data.paperAndQuestion);
        console.log("getPaperAndQuestion", this.answerList); */
      } catch (error) {
        console.log(error);
      }
    },
    /**
     * 提交考卷
     */
    submit() {
      console.log(this.form);
      this.clearAnswers();
    },
    /**
     * 倒计时结束：提交试卷
     */
    countDownEnd() {
      console.log("倒计时结束");
      this.submit();
    },
  },
};
</script>

<style scoped lang="scss">
.doExam {
  background: #eff3f7;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: row;
  padding: 20px 90px;
  .paper {
    width: 300px;
    padding: 20px;
    background-color: white;
    .tilte {
      font-size: 18px;
      color: #27274a;
      padding-bottom: 10px;
    }
    .score {
      color: #303133;
      font-size: 14px;
      padding: 10px 0;
    }
    .questionLabel {
      display: flex;
      flex-wrap: wrap;
    }
    .time-remaining {
      .time-remaining-label {
        font-size: 14px;
        font-weight: 400;
      }
      .time-remaining-content {
        margin-top: 5px;
        font-size: 18px;
        line-height: 22px;
        color: red;
        font-weight: 400;
      }
    }
  }
  .questiones {
    flex: 1;
    background-color: white;
    overflow-y: auto;
  }
}
</style>
